<html><head><meta charset="utf-8"><title>对声明合并的爱与恨-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 4-3 对声明合并的爱与恨
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                对声明合并的爱与恨
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-12 09:24:27
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img.mukewang.com/5d244f07000167da06400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">理想的书籍是智慧的钥匙。<p class="author">——列夫·托尔斯泰</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">声明合并是指 TypeScript 编译器会将名字相同的多个声明合并为一个声明，合并后的声明同时拥有多个声明的特性。我们知道在 JavaScrip 中，使用var关键字定义变量时，定义相同名字的变量，后面的会覆盖前面的值。使用let 定义变量和使用 const 定义常量时，不允许名字重复。在 TypeScript 中，接口、命名空间是可以多次声明的，最后 TypeScript 会将多个同名声明合并为一个。我们下来看个简单的例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Info</span> <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token keyword">string</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">Info</span> <span class="token punctuation">{</span>
    age<span class="token punctuation">:</span> <span class="token keyword">number</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> info<span class="token punctuation">:</span> Info
info <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// error 类型“{ name: string; }”中缺少属性“age”</span>
    name<span class="token punctuation">:</span> <span class="token string">'lison'</span>
<span class="token punctuation">}</span>
info <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// right</span>
    name<span class="token punctuation">:</span> <span class="token string">'lison'</span><span class="token punctuation">,</span>
    age<span class="token punctuation">:</span> <span class="token number">18</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">可以看到，我们定义了两个同名接口Info，每个接口里都定义了一个必备属性，最后定义info类型为Info时，info的定义要求同时包含name和age属性。这就是声明合并的简单示例，接下来我们详细学习。</p>
</div><div class="cl-preview-section"><h3 id="补充知识">4.3.1. 补充知识</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">TypeScript的所有声明概括起来，会创建这三种实体之一：<strong>命名空间、类型</strong>和<strong>值</strong>：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">命名空间的创建实际是创建一个对象，对象的属性是在命名空间里export导出的内容；</li>
<li style="font-size: 20px; line-height: 38px;">类型的声明是创建一个类型并赋给一个名字；</li>
<li style="font-size: 20px; line-height: 38px;">值的声明就是创建一个在JavaScript中可以使用的值。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面这个表格会清晰的告诉你，每一种声明类型会创建这三种实体中的哪种，先来说明一下，第一列是指声明的内容，每一行包含4列，表明这一行中，第一列的声明类型创建了后面三列哪种实体，打钩即表示创建了该实体：</p>
</div><div class="cl-preview-section"><div class="table-wrapper"><table>
<thead>
<tr>
<th align="left">声明类型</th>
<th align="center">创建了命名空间</th>
<th align="center">创建了类型</th>
<th align="center">创建了值</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Namespace</td>
<td align="center">√</td>
<td align="center"></td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">Class</td>
<td align="center"></td>
<td align="center">√</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">Enum</td>
<td align="center"></td>
<td align="center">√</td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">Interface</td>
<td align="center"></td>
<td align="center">√</td>
<td align="center"></td>
</tr>
<tr>
<td align="left">Type Alias类型别名</td>
<td align="center"></td>
<td align="center">√</td>
<td align="center"></td>
</tr>
<tr>
<td align="left">Function</td>
<td align="center"></td>
<td align="center"></td>
<td align="center">√</td>
</tr>
<tr>
<td align="left">Variable</td>
<td align="center"></td>
<td align="center"></td>
<td align="center">√</td>
</tr>
</tbody>
</table>
</div></div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">可以看到，只要命名空间创建了命名空间这种实体。Class、Enum两个，Class即是实际的值也作为类使用，Enum编译为JavaScript后也是实际值，而且我们讲过，一定条件下，它的成员可以作为类型使用；Interface和类型别名是纯粹的类型；而Funciton和Variable只是创建了JavaScript中可用的值，不能作为类型使用，注意这里Variable是变量，不是常量，常量是可以作为类型使用的。</p>
</div><div class="cl-preview-section"><h3 id="合并接口">4.3.2. 合并接口</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们在本节课一开始的例子中，简单示范了一下接口声明的合并，下面我们来补充一些内容。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">多个同名接口，定义的非函数的成员命名应该是不重复的，如果重复了，类型应该是相同的，否则将会报错。</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Info</span> <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token keyword">string</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">Info</span> <span class="token punctuation">{</span>
    age<span class="token punctuation">:</span> <span class="token keyword">number</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">Info</span> <span class="token punctuation">{</span>
    age<span class="token punctuation">:</span> <span class="token keyword">boolean</span> <span class="token comment">// error 后续属性声明必须属于同一类型。属性“age”的类型必须为“number”，但此处却为类型“boolean”</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">对于函数成员，每个同名函数成员都会被当成这个函数的重载，且合并时后面的接口具有更高的优先级。来看下多个同名函数成员的例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Res</span> <span class="token punctuation">{</span>
    <span class="token function">getRes</span><span class="token punctuation">(</span>input<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">number</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">Res</span> <span class="token punctuation">{</span>
    <span class="token function">getRes</span><span class="token punctuation">(</span>input<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">string</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> res<span class="token punctuation">:</span> Res <span class="token operator">=</span> <span class="token punctuation">{</span>
    getRes<span class="token punctuation">:</span> <span class="token punctuation">(</span>input<span class="token punctuation">:</span> <span class="token keyword">any</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">any</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> input <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> input<span class="token punctuation">.</span>length
        <span class="token keyword">else</span> <span class="token keyword">return</span> <span class="token function">String</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
res<span class="token punctuation">.</span><span class="token function">getRes</span><span class="token punctuation">(</span><span class="token string">'123'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// error 类型“number”上不存在属性“length”</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="合并命名空间">4.3.3. 合并命名空间</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">同名命名空间最后会将多个命名空间导出的内容进行合并，如下面两个命名空间：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkNumber</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkString</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上面定义两个同名命名空间，效果相当于：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkNumber</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkString</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在命名空间里，有时我们并不是把所有内容都对外部可见，对于没有导出的内容，在其它同名命名空间内是无法访问的：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
    <span class="token keyword">const</span> numberReg <span class="token operator">=</span> <span class="token regex">/^[0-9]+$/</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> stringReg <span class="token operator">=</span> <span class="token regex">/^[A-Za-z]+$/</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkString</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkNumber</span> <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">:</span> <span class="token keyword">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> numberReg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token comment">// error 找不到名称“numberReg”</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上面定义的两个命名空间，numberReg没有使用export导出，所以在第二个同名命名空间内是无法使用的，如果给 const numberReg 前面加上 export，就可以在第二个命名空间使用了。</p>
</div><div class="cl-preview-section"><h3 id="不同类型合并">4.3.4. 不同类型合并</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">命名空间分别和类、函数、枚举都可以合并，下面我们来一一说明：</p>
</div><div class="cl-preview-section"><h4 id="命名空间和类" style="font-size: 26px;">(1) 命名空间和类</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里要求同名的类和命名空间在定义的时候，类的定义必须在命名空间前面，最后合并之后的效果，一个包含一些以命名空间导出内容为静态属性的类，来看例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">class</span> <span class="token class-name">Validation</span> <span class="token punctuation">{</span>
    <span class="token function">checkType</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> numberReg <span class="token operator">=</span> <span class="token regex">/^[0-9]+$/</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> stringReg <span class="token operator">=</span> <span class="token regex">/^[A-Za-z]+$/</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkString</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkNumber</span> <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">:</span> <span class="token keyword">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> numberReg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Validation<span class="token punctuation">.</span>prototype<span class="token punctuation">)</span> <span class="token comment">// { checkType: fun () {} }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Validation<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token keyword">constructor</span><span class="token punctuation">)</span> 
<span class="token comment">/**
{
    checkNumber: ...
    checkString: ...
    numberReg: ...
    stringReg: ...
}
*/</span>
</code></pre>
</div><div class="cl-preview-section"><h4 id="命名空间和函数" style="font-size: 26px;">(2) 命名空间和函数</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在JavaScript中，函数也是对象，所以可以给一个函数设置属性，在TypeScript中，就可以通过声明合并实现。但同样要求，函数的定义要在同名命名空间前面，我们再拿之前讲过的计数器的实现来看下，如何利用声明合并实现计数器的定义：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">function</span> <span class="token function">countUp</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    countUp<span class="token punctuation">.</span>count<span class="token operator">++</span>
<span class="token punctuation">}</span>
<span class="token keyword">namespace</span> countUp <span class="token punctuation">{</span>
    <span class="token keyword">export</span> <span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span>
<span class="token punctuation">}</span>
<span class="token function">countUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">countUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>countUp<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 2</span>
</code></pre>
</div><div class="cl-preview-section"><h4 id="命名空间和枚举" style="font-size: 26px;">(3) 命名空间和枚举</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">可以通过命名空间和枚举的合并，为枚举拓展内容，枚举和同名命名空间的先后顺序是没有要求的，来看例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">enum</span> Colors <span class="token punctuation">{</span>
    red<span class="token punctuation">,</span>
    green<span class="token punctuation">,</span>
    blue
<span class="token punctuation">}</span>
<span class="token keyword">namespace</span> Colors <span class="token punctuation">{</span>
    <span class="token keyword">export</span> <span class="token keyword">const</span> yellow <span class="token operator">=</span> <span class="token number">3</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Colors<span class="token punctuation">)</span>
<span class="token comment">/*
{
    0: "red",
    1: "green",
    2: "blue",
    red: 0,
    green: 1,
    blue: 2,
    yellow: 3 
}
*/</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">通过打印结果你可以发现，虽然我们使用命名空间增加了枚举的成员，但是最后输出的值只有key到index的映射，没有index到key的映射。</p>
</div><div class="cl-preview-section"><h3 id="小结">小结</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们学习了编译器对于相同命名的声明的合并策略，这个策略能够帮我们实现一些类型定义的复用，比如多个函数定义可合并为一个函数的重载，还可以利用声明合并实现一些复杂的类型定义。但是有时我们会无意地定义了一个之前定义过的名字，造成声明合并了，再使用这个新定义的时候，发现应用了一些这里未定义的类型校验，所以我们在定义名字的时候要注意这一点。本小节我们讲了接口、命名空间、不同类型是如何合并的，也学习了如何利用声明合并来定义复杂的数据结构。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下个小节我们来学习混入，在使用一些框架或者插件的时候，你可能听过这个概念，我们可以将公共逻辑抽取出来，然后通过混入实现复用。在TypeScript中，混入还需要考虑类型，所以我们下个小节来看下如何在TypeScript中实现混入。<br>
<img src="http://img.mukewang.com/5d22b984000115ac16000560.jpg" alt="图片描述" data-original="http://img.mukewang.com/5d22b984000115ac16000560.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/364">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    使用命名空间封装代码
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/366">
                                                    <div class="next r clearfix">
                                <p>
                                    混入，兼顾值和类型的合并操作
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">0</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <div class="noData">                 <p>                     <i class="imv2-error_c"></i>                 </p>                 <p>目前暂无任何讨论</p>             </div>              </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>